<template>
	<view class="chat-page">
		<!-- 顶部导航 -->
		<view class="chat-header">
			<view class="header-left">
				<uni-icons type="arrowleft" size="24" color="#2d3748" @click="goBack"></uni-icons>
				<view class="user-info">
					<!-- <view class="avatar-box">
						<image :src="targetUser.avatar" class="avatar" />
						<view v-if="targetUser.online" class="online-dot"></view>
					</view>
					<text class="username">{{ targetUser.username }}</text> -->
				</view>
			</view>
			<uni-icons type="more" size="24" color="#2d3748"></uni-icons>
		</view>

		<!-- 聊天内容区域 -->
		<scroll-view scroll-y class="chat-content" :scroll-into-view="scrollToId" @scrolltoupper="loadMore">
			<view v-for="(msg, index) in messages" :key="msg.id" :id="'msg'+index">
				<!-- 时间分隔 -->
				<view class="time-divider" v-if="msg.showTime">
					<text>{{ msg.createTime }}</text>
				</view>

				<!-- 消息气泡 -->
				<view class="message-box" :class="[msg.sender === 'me' ? 'right' : 'left']">
					<image v-if="msg.sender !== 'me'" :src="targetUser.avatar" class="msg-avatar" />
					<view class="bubble">
						<text class="msg-content">{{ msg.content }}</text>
						<view class="meta">
							<text class="time">{{ msg.createTime }}</text>
							<uni-icons v-if="msg.sender === 'me'"
								:type="msg.status === 'sent' ? 'checkmarkempty' : 'spinner-cycle'" size="14"
								:color="msg.status === 'sent' ? '#667eea' : '#ccc'"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 输入区域 -->
		<view class="input-area">
			<uni-icons type="plus" size="24" color="#667eea" class="action-icon" @click="showMoreActions"></uni-icons>
			<input class="input" v-model="inputMsg" placeholder="输入消息..." placeholder-style="color:#a0aec0"
				@confirm="sendText" :adjust-position="false" />
			<view class="send-btn" :class="{active: inputMsg}" @click="sendText">
				{{ inputMsg ? '发送' : '发送' }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				targetUser: {
					avatar: '/static/avatars/1.jpg',
					username: '技术支援部',
					online: true
				},
				messages: [
					// {
					// 	id: 1,
					// 	content: '您好，有什么可以帮您？',
					// 	sender: 'other',
					// 	time: 1620000000,
					// 	status: 'sent'
					// },
					// {
					// 	id: 2,
					// 	content: '我的订单状态显示异常',
					// 	sender: 'me',
					// 	time: 1620001000,
					// 	status: 'sent'
					// },
				],
				inputMsg: '',
				scrollToId: '',
				chatId: '',
				roles: ''
			}
		},
		onLoad(options) {
			this.roles = uni.getStorageSync('roles')
			this.chatId = options.id
			this.getmessages()
		},
		methods: {
			async getmessages() {
				try {
					let res = await this.$api.list('negotiation', {
						chatId: this.chatId
					})
					if (res.code == 200) {
						this.messages = res.rows.map((item) => {
							return {
								content: item.sendContent,
								sender: item.sendType === this.roles ? "me" : "other"
							};

						})
						console.log('聊天记录', this.messages, res.rows);
					}
				} catch (error) {
					//TODO handle the exception
				}
			},
			async sendText() {
				if (!this.inputMsg.trim()) return

				const newMsg = {
					id: Date.now(),
					content: this.inputMsg,
					sender: 'me',
					time: Math.floor(Date.now() / 1000),
					status: 'sending'
				}
				// this.messages.push(newMsg)
				try {
					let res = await this.$api.add('negotiation', {
						chatId: this.chatId,
						sendContent: this.inputMsg,
						sendType: this.roles
					})
					if (res.code == 200) {
						this.getmessages()
						// this.messages = res.rows.map((item) => {

						// 	content: item.sendContent
						// 	sender: item.sendType == this.roles ? "me" : "other"

						// })
					}
				} catch (error) {
					//TODO handle the exception
				}
				this.inputMsg = ''
				this.scrollToBottom()

				// 模拟发送成功
				setTimeout(() => {
					newMsg.status = 'sent'
				}, 1000)
			},
			scrollToBottom() {
				setTimeout(() => {
					const lastIndex = this.messages.length - 1
					this.scrollToId = 'msg' + lastIndex
				}, 100)
			},
			formatTime(timestamp) {
				// 时间格式化逻辑
				return '今天 10:30'
			},
			formatSimpleTime(timestamp) {
				return '10:30'
			},
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.chat-page {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: linear-gradient(15deg, #f8f9ff 0%, #f1f3fe 100%);
	}

	.chat-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background: rgba(255, 255, 255, 0.96);
		box-shadow: 0 2rpx 12rpx rgba(102, 126, 234, 0.08);

		.header-left {
			display: flex;
			align-items: center;
			gap: 20rpx;

			.user-info {
				display: flex;
				align-items: center;
				gap: 16rpx;

				.username {
					font-size: 34rpx;
					font-weight: 600;
					color: #2d3748;
				}
			}
		}
	}

	.avatar-box {
		position: relative;

		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 16rpx;
		}

		.online-dot {
			position: absolute;
			right: -4rpx;
			bottom: -4rpx;
			width: 16rpx;
			height: 16rpx;
			background: #4cd964;
			border: 2rpx solid #fff;
			border-radius: 50%;
		}
	}

	.chat-content {
		flex: 1;
		padding: 30rpx;
		overflow-anchor: auto;
	}

	.time-divider {
		text-align: center;
		margin: 40rpx 0;

		text {
			padding: 8rpx 24rpx;
			background: rgba(204, 204, 204, 0.2);
			border-radius: 40rpx;
			font-size: 24rpx;
			color: #718096;
		}
	}

	.message-box {
		display: flex;
		margin: 20rpx 0;
		gap: 16rpx;

		&.left {
			flex-direction: row;

			.bubble {
				background: #fff;
				border-radius: 0 24rpx 24rpx 24rpx;
			}
		}

		&.right {
			flex-direction: row-reverse;

			.bubble {
				background: linear-gradient(135deg, #667eea, #764ba2);
				border-radius: 24rpx 0 24rpx 24rpx;
			}

			.meta {
				justify-content: flex-end;
			}
		}

		.msg-avatar {
			width: 64rpx;
			height: 64rpx;
			border-radius: 12rpx;
			align-self: flex-end;
		}
	}

	.bubble {
		max-width: 500rpx;
		padding: 20rpx 24rpx;
		box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.1);
		position: relative;

		.msg-content {
			font-size: 30rpx;
			line-height: 1.5;
			color: #2d3748;
		}

		.meta {
			display: flex;
			align-items: center;
			gap: 8rpx;
			margin-top: 12rpx;

			.time {
				font-size: 22rpx;
				color: #718096;
			}
		}

		.right & {
			.msg-content {
				color: #fff;
			}

			.time {
				color: rgba(255, 255, 255, 0.8);
			}
		}
	}

	.input-area {
		position: fixed;
		width: 100vw;
		bottom: 0;
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		background: #fff;
		border-top: 2rpx solid #f1f3fe;

		.input {
			flex: 1;
			height: 72rpx;
			padding: 0 24rpx;
			margin: 0 20rpx;
			background: #f8f9ff;
			border-radius: 40rpx;
			font-size: 28rpx;
			transition: all 0.3s;

			&:focus {
				box-shadow: 0 0 0 2rpx #667eea33;
			}
		}

		.action-icon {
			padding: 12rpx;
		}

		.send-btn {
			padding: 12rpx 32rpx;
			border-radius: 40rpx;
			background: #f1f3fe;
			color: #667eea;
			font-size: 28rpx;
			transition: all 0.3s;

			&.active {
				background: linear-gradient(135deg, #667eea, #764ba2);
				color: #fff;
				box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.2);
			}
		}
	}
</style>